<template>
    <!-- 详情页主要内容 -->
    <view class="container mx-auto px-4 py-8">
        <view class="flex flex-col gap-20 lg:flex-row">
            <!-- 电影海报 -->
            <view class="lg:w-1/3">
                <view class="overflow-hidden rounded-lg shadow-xl">
                    <img src="http://localhost:3000/images/m1.jpg" alt="让子弹飞海报" class="h-auto w-full" />
                </view>
                <view class="mt-4 flex flex-wrap gap-2">
                    <span class="rounded-full bg-gray-700 px-3 py-1 text-sm">动作</span>
                    <span class="rounded-full bg-gray-700 px-3 py-1 text-sm">喜剧</span>
                    <span class="rounded-full bg-gray-700 px-3 py-1 text-sm">犯罪</span>
                </view>
                <view class="mt-6 flex items-center justify-between">
                    <view class="flex items-center">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-yellow-400"
                            viewBox="0 0 20 20"
                            fill="currentColor">
                            <path
                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span class="ml-1 text-lg font-bold">8.9</span>
                        <span class="ml-1 text-gray-400">/10</span>
                    </view>
                    <button
                        size="mini"
                        class="flex items-center rounded-md bg-accent md:px-6 md:py-2 text-white transition hover:bg-red-700">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="mr-1 h-5 w-5"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        立即观看
                    </button>
                </view>
            </view>

            <!-- 电影信息 -->
            <view class="lg:w-2/3">
                <h1 class="mb-12 text-3xl font-bold md:text-4xl">{{ movieDetail.title }}</h1>

                <!-- 基本信息 -->
                <view class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">基本信息</h2>
                    <view class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <view>
                            <p><strong class="text-gray-400">导演:</strong> {{ movieDetail.director }}</p>
                            <p><strong class="text-gray-400">主演:</strong> {{ movieDetail.actors }}</p>
                            <p><strong class="text-gray-400">类型:</strong> {{ movieDetail.type }}</p>
                        </view>
                        <view>
                            <p><strong class="text-gray-400">上映日期:</strong> {{ movieDetail.releaseDate }}</p>
                            <p><strong class="text-gray-400">国家/地区:</strong> {{ movieDetail.area }}</p>
                            <p><strong class="text-gray-400">语言:</strong> {{ movieDetail.language }}</p>
                            <p><strong class="text-gray-400">片长:</strong> {{ movieDetail.duration }}</p>
                        </view>
                    </view>
                </view>

                <!-- 剧情简介 -->
                <view class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">剧情简介</h2>
                    <view class="space-y-4 text-gray-300">
                        <p v-for="(item, index) in movieDetail.summary" :key="index">{{ item }}</p>
                    </view>
                </view>

                <!-- 演职员表 -->
                <view class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">演职员表</h2>
                    <view class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
                        <view class="text-center" v-for="(item, index) in movieDetail.casts" :key="index">
                            <view class="mx-auto mb-2 h-24 w-24 overflow-hidden rounded-full">
                                <img
                                    :src="item.avatar"
                                    alt="姜文"
                                    class="h-full w-full object-cover object-[center_20%]" />
                            </view>
                            <p class="font-medium">{{ item.name }}</p>
                            <p class="text-sm text-gray-400">{{ item.role }}</p>
                        </view>
                    </view>
                </view>

                <!-- 预告片 -->
                <view class="mb-8">
                    <h2 class="mb-4 border-b border-gray-700 pb-2 text-xl font-bold">预告片</h2>
                    <view class="aspect-w-16 aspect-h-9 overflow-hidden rounded-lg bg-black">
                        <!-- <video controls class="w-full" poster="">
                            <source :src="movieDetail.trailer" type="video/mp4" />
                            您的浏览器不支持视频播放。
                        </video> -->
                        <video :src="movieDetail.trailer" class="w-full" controls autoplay></video>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { getMovieDetailAPI } from "@/api/index";

// const movieDetail1 = {
//     id: "301070520",
//     title: "让子弹飞",
//     poster: "http://localhost:3000/images/m1.jpg",
//     rating: 8.9,
//     releaseDate: "2010-12-16",
//     duration: "128分钟",
//     director: "姜文",
//     actors: "姜文, 周润发, 葛优, 刘嘉玲, 陈坤, 张默",
//     type: "动作, 喜剧, 犯罪",
//     area: "中国大陆",
//     language: "汉语普通话",
//     summary: [
//         "民国年间，花钱捐得县长的马邦德（葛优饰）携妻（刘嘉玲饰）及随从走马上任。途经南国某地，遭劫匪张麻子（姜文饰）一伙伏击，随从尽死，只夫妻二人侥幸活命。马为保命，谎称自己是县长的汤师爷。为汤师爷许下的财富所动，张麻子摇身一变化身县长，带着手下赶赴鹅城上任。",
//         "地处偏僻的鹅城地处偏僻的鹅城恶霸黄四郎（周润发饰）只手遮天，全然不将这个新来的县长放在眼里，天高皇帝远。张麻子痛打了黄的武教头（姜武饰），黄则设计害死张的义子小六（张默饰）。原本只想赚钱的马邦德，怎么也想不到竟会被卷入这场土匪和恶霸的角力之中。",
//         "鹅城上空愁云密布，血雨腥风在所难免……",
//         "本片根据马识途的小说《夜谭十记》中的《盗官记》一章改编。"
//     ],
//     trailer: "http://localhost:3000/video/301070520.mp4",
//     casts: [
//         {
//             name: "姜文",
//             avatar: "http://localhost:3000/images/jiangwen.webp",
//             role: "导演/张麻子"
//         },
//         {
//             name: "周润发",
//             avatar: "http://localhost:3000/images/zhourunfa.jpg",
//             role: "黄四郎"
//         },
//         {
//             name: "葛优",
//             avatar: "http://localhost:3000/images/geyou.webp",
//             role: "马邦德"
//         },
//         {
//             name: "刘嘉玲",
//             avatar: "http://localhost:3000/images/liujialing.jfif",
//             role: "县长夫人"
//         }
//     ]
// };

const movieDetail = ref<any>({});

const getList = async () => {
    const res = await getMovieDetailAPI();
    movieDetail.value = res[0];
};

onMounted(() => {
    getList();
});
</script>

<style scoped lang="scss"></style>
